<template>
  <el-tooltip effect="dark" :content="content" :disabled="!isShowTip" :tabindex="-1" v-bind="tooltipAttrs">
    <div class="name one-line" :class="{ required: required }" @mouseenter="checkShowTip">{{ content }}</div>
  </el-tooltip>
</template>

<script lang="ts" setup>
import { ref } from "vue";
defineOptions({
  name: "TooltipBox"
});
withDefaults(defineProps<{ content: string; required?: boolean; tooltipAttrs: any }>(), {
  content: "",
  required: false,
  tooltipAttrs: () => ({
    placement: "top-start",
    openDelay: 0
  })
});
const isShowTip = ref(false);
const checkShowTip = (event: Event) => {
  const target = event.currentTarget as HTMLDivElement;
  isShowTip.value = target.clientWidth < target.scrollWidth;
};
</script>
<style scoped lang="scss">
.name {
  &.required {
    &::after {
      content: "*";
      color: red;
      margin-left: 2px;
    }
  }
}
</style>
